<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Examine normal transformation: translation</title>

    <!-- Basic style -->
    <link rel="stylesheet" href="style.css" type="text/css">

    <!-- Tangle -->
    <script type="text/javascript" src="../Tangle/Tangle.js"></script>

    <!-- TangleKit -->
    <link rel="stylesheet" href="../Tangle/TangleKit/TangleKit.css" type="text/css">
    <link rel="stylesheet" href="../Tangle/TangleKit/TangleKitBVExt.css" type="text/css">
    <script type="text/javascript" src="../Tangle/TangleKit/mootools.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/sprintf.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/BVTouchable.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/TangleKit.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/TangleKitBVExt.js"></script>

    <!-- TangleKit HY Extension -->
    <script type="text/javascript" src="../Tangle/TangleKit/TangleKitHYExt.js"></script>

    <link rel="stylesheet" href="normal_transform_02_style.css" type="text/css">

    <!-- normal transformation -->
    <script type="text/javascript" src="./hyvector.js"></script>
    <script type="text/javascript" src="./hymatrix.js"></script>
    <script type="text/javascript" src="./normal_transform_02.js"></script>
  </head>
  <body>
    <h1>Tangle: experience. Version 0.2</h1>

    <h2>Why doesn't transformation work on normal vectors?</h2>
    <h3>Translation operation has no problem.</h3>

    <div id="NormalTransformPage">

      <div id="normal_transform_section">
        <!-- Inside this, the elements can be tangled. -->
        <div class="NormalTransformCanvasArea" id="normal_transform_canvas_area">

          <!-- ----------------------------------------------------------------------  -->
          <!-- main canvas -->
          <canvas class="TKNormalTransformCanvas"
                  data-var="scale_x scale_y rotate_theta_deg p0x p0y p1x p1y translation_x translation_y normalOnOffState"
                  width="300" height="300">
            main canvas: This browser doesn't support a canvas.
          </canvas>
          Show normal: <span class="TkExpandingList" data-var="normalOnOffState" data-items="On/Off"></span>
        </div> <!-- NormalTransformCanvasArea -->

        <!-- ----------------------------------------------------------------------  -->

        <div class="TranslationCanvasArea" id="translation_canvas_area">
          <!-- translation canvas -->
          <canvas class="TKMatrixTransformCanvas"
                  data-var="translation_x translation_y normalOnOffState"
                  data-matrixtype="transMat"
                  width="150" height="150">
            translation canvas: This browser doesn't support a canvas.
          </canvas>
          <p id="translation_text">Translation</p>
        </div>
        <div class="ScaleCanvasArea" id="scale_canvas_area">
          <!-- scale canvas -->
          <canvas class="TKMatrixTransformCanvas"
                  data-var="scale_x scale_y normalOnOffState"
                  data-matrixtype="scaleMat"
                  width="150" height="150">
            scale canvas: This browser doesn't support a canvas.
          </canvas>
          <p id="scaling_text">Scaling</p>
        </div>
        <div class="RotationCanvasArea" id="rotation_canvas_area">
          <!-- rotation canvas -->
          <canvas class="TKMatrixTransformCanvas"
                  data-var="rotate_theta_deg normalOnOffState"
                  data-matrixtype="rotateMat"
                  width="150" height="150">
            rotate canvas: This browser doesn't support a canvas.
          </canvas>
          <p id="rotation_text">Rotation</p>
        </div>
        <!-- ----------------------------------------------------------------------  -->
      </div>   <!-- normal_transform_section -->
    </div>   <!-- NormalTransformPage -->
  </body>
</html>


